<template lang="html">
	<div class="row">
		<ul class="list-group col-sm-3">
			<router-link tag="li" active-class="act" :to="{path:'/com/base'}" class="list-group-item">
				基础组件的使用
			</router-link>
			<router-link tag='li' active-class='act' :to="{path:'/com/son'}" class="list-group-item">
				父组件给子组件传参
			</router-link>
			<router-link tag="li" active-class='act' :to="{path:'/com/toParent'}" class='list-group-item'>子组件给父组件传值</router-link>
			<router-link tag='li' active-class='act' :to="{path:'/com/is'}" class='list-group-item'>is的使用</router-link>
			<router-link tag='li' active-class='act' :to="{path:'/com/slot'}" class='list-group-item'>
				插槽功能
			</router-link>
			<router-link tag='li' active-class='act' :to="{path:'/com/slotName'}" class="list-group-item">具名插槽</router-link>
			<router-link tag='li' active-class='act' :to="{path:'/com/star'}" class='list-group-item'>star组件应用</router-link>
		</ul>
		<div class="col-sm-8">
			<router-view></router-view>
		</div>
	</div>
</template>
<script>
	export default{

	}
</script>
<style scoped="">
	.act{
		color: #fff;
		background-color: #000;
	}
</style>